<template>
  <chart :options="option" height="30vh" />
</template>

<script setup lang="ts">
var seriesData = [
  {
    name: '低风险',
    value: 3321,
    rate: 40
  },
  {
    name: '一般风险',
    value: 4544,
    rate: 50
  },
  {
    name: '较大风险',
    value: 7899,
    rate: 60
  }
]
var optionRich: any = {
  a: {
    width: 60,
    fontSize: 18,
    fontWeight: 400,
    color: '#FFF',
    lineHeight: 20,
    padding: [0, 50, 0, 0]
  }
}
var optionColorArr: Record<string, string> = {
  低风险: '#5694FF',
  一般风险: '#FFCC1A',
  较大风险: '#FF9152'
}
seriesData.forEach((ele, i) => {
  optionRich[i] = {
    width: 20,
    fontSize: 18,
    fontWeight: 400,
    lineHeight: 20,
    color: optionColorArr[ele.name],
    align: 'center',
    padding: [0, 0, 0, 20]
  }
})
let option = {
  color: seriesData.map((item) => optionColorArr[item.name]),
  title: {
    text: `{a| 总数 }`,
    textStyle: {
      rich: {
        a: {
          fontSize: 14,
          color: '#FFF'
        }
      }
    },
    subtext: `{a|${100 + '个'}}`,
    subtextStyle: {
      rich: {
        a: {
          fontSize: 14,
          color: '#FFF',
          padding: [0, 0, 0, -5]
        }
      }
    },
    x: '20%',
    y: '45%'
  },
  tooltip: {
    trigger: 'item',
    show: true,
    formatter: (params: Record<string, any>) => {
      const { data, name, value } = params
      return `
               <div style="color: ${params.color}; font-size: 14px;">${name}&nbsp;&nbsp;&nbsp;<span style="font-size: 14px; color: #000; float: right;">${value}</span></div>
               <div style="color: ${params.color}; font-size: 14px;">占比&nbsp;<span style="font-size: 14px; color: #000; float: right;">${data.rate}%</span></div>
            `
    }
  },
  grid: {
    top: '0',
    left: '0',
    right: '0',
    bottom: '0',
    containLabel: true
  },
  legend: {
    type: 'scroll',
    orient: 'vertical',
    left: '45%',
    align: 'left',
    top: 'middle',
    icon: 'circle',
    itemHeight: 10,
    itemWidth: 10,
    itemGap: 15,
    height: 260,
    formatter: function (name: string | null) {
      let index = 0
      let value = 0
      let rate = 0
      seriesData.forEach((item, i) => {
        if (item.name == name) {
          value = item.value ? item.value : 0
          rate = item.rate ? item.rate : 0
          index = i
        }
      })
      return `{a|${name}}{${index}|${rate + '%'}}{${index}|${'|'}}{${index}|${value}}`
    },
    textStyle: {
      rich: optionRich
    }
  },
  series: [
    {
      type: 'pie',
      center: ['25%', '50%'],
      radius: ['50%', '40%'],
      clockwise: true, //饼图的扇区是否是顺时针排布
      avoidLabelOverlap: false,
      label: {
        normal: {
          show: false
        }
      },
      data: seriesData
    }
  ]
}

defineOptions({
  name: 'LFR'
})
</script>

<style scoped></style>
